import doT from "../../../../../../public/vendor/template/doT.js";
import ContactAPI from '../../../../common/api/mybusiness/workreport/reportcontact.api';

Utils.NameSpace('SN.CptvPlf.Bid.Wxcontact');
const _isNothing = `<div class="weui-loadmore weui-loadmore_line">
<span class="weui-loadmore__tips">暂无数据</span>
</div>`;
const _page = {
    searchInfo: "",
    pageSize: 10,
    pageIndex: 0,
    totalPages: -1
};
let employeesList = [];
let checkboxList = [];
(function (window, document, $) {
    let _vm, max = 10, page = 1;
    $(function () {
        _vm = new Vue({
            el: "#contact-auction",
            data() {
                return {
                    // rbtAuctionListHtml: '<div>xxxx</div>',
                    // bottomLoading: false,
                    isNothing: true,
                    // quickQuery: '',
                    page: { ..._page },
                    ischeckboxNum: 0
                }
            },
            methods: {
                navbarClick: function (e) {
                }
            }
        });
        weui.searchBar('#searchInput');
        //TODO : 员工上拉加载
        $("#iscroll").infinite().on("infinite", function () {
            let _data = _vm._data.page;
            if (_data.pageIndex == _data.totalPages) return;
            let self = this;
            if (self.loading) return;
            self.loading = true;
            setTimeout(function () {
                queryEmployeesList();
                self.loading = false;
            }, 500);   //模拟延迟
        });
        $("#searchdiv form").submit(function () {
            let _page = { "searchInfo": $('#searchInput').val(), "pageIndex": 0, "totalPages": -1, "pageSize": 10 };
            _vm._data.page = Object.assign(_vm._data.page, _page);
            $("#content").empty();
            queryEmployeesList();
            return false;
        });
        // $('#searchInput').on('keyup', function (event) { // 搜索回车事件
        //     event.preventDefault();
        //     if (event.keyCode === 13) {

        //     }
        // });
        // queryEmployeesList();
        search();
        $(document).on('click', '.weui-check__label', function (event) { // 搜索回车事件
            // event.stopPropagation();   //表示阻止向父元素冒泡
            event.preventDefault();     //阻止 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交或者a标签）
            let isChecked = $(this).find("input[type='checkbox']").is(':checked')
            $(this).find("input[type='checkbox']").prop("checked", !isChecked);
            if (!isChecked == true && checkboxList.includes($(this).data("id")) == false) {
                checkboxList.push($(this).data("id"));
            } else {
                checkboxList.splice(checkboxList.indexOf($(this).data("id")), 1);
            }
            $('#subEmployees').text(`确定(${checkboxList.length})`);
        });
        $("#subEmployees").on('click', function () {
            let subData = [...checkboxList.map(item => { return employeesList.find(item1 => item1.id == item); })] || [];
            Utils.SetSessionStorage("employeesInfoList", subData);

            window.history.back(-1);
        })
    });

    const queryEmployeesList = () => {
        let _data = _vm._data.page;
        ContactAPI.queryEmployees(_data).then(res => {
            let _page = {
                searchInfo: $('#searchInput').val(),
                pageSize: 10,
                pageIndex: _data.pageIndex + 1,
                totalPages: res.totalPages
            }
            _vm._data.page = Object.assign({}, _page);
            res.items.map(item => {
                let labhtml = `<label class="weui-cell weui-cell_active weui-check__label" for="${item.id}" data-id="${item.id}" id="lab_${item.id}">
					<div class="weui-cell__hd">
						<input type="checkbox" class="weui-check" name="checkbox1" id="${item.id}">
						<i class="weui-icon-checked"></i>
					</div>
					<div class="weui-cell__hd" aria-hidden="true" style="position: relative;">
						<img src="../../../../../../public/static/images/other/pic_default_headimg.png" alt="" class="headPortrait"
							style="width: 50px;display: block;">
					</div>
					<div class="weui-cell__bd" aria-hidden="true">
						<span class="lab_name">${item.name}</span>
						<div class="demo_badge_desc lab_numCode">工号：${item.numCode}</div>
					</div>
				</label>`
                $("#content").append(labhtml);
                // $(`#lab_${item.id}`).find("input[type='checkbox']").prop("checked", checkboxList.includes($(this).data("id")));
            })
            checkboxList.map(item => $(`#${item}`).prop("checked", true));
            // $("#content").empty().append(x);
            employeesList = [...employeesList, ...res.items];
        })
    }
    const search = () => {
        let $searchBar = $('#searchBar'),
            $searchResult = $('#searchResult'),
            $searchText = $('#searchText'),
            $searchInput = $('#searchInput'),
            $searchClear = $('#searchClear'),
            $searchForm = $('#searchForm'),
            $searchCancel = $('#searchCancel');

        function hideSearchResult() {
            $searchResult.hide();
            $searchForm.attr('aria-expanded', 'false');
            $searchInput.val('');
        }
        function cancelSearch() {
            hideSearchResult();
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }

        $searchText.on('click', function () {
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });

        $searchInput
            .on('blur', function () {
                if (!this.value.length) cancelSearch();
            })
            .on('input', function () {

                if (this.value.length) {
                    $searchResult.show();
                    $searchForm.attr('aria-expanded', 'true');
                } else {
                    $("#content").empty();
                    let _page = { "searchInfo": $('#searchInput').val(), "pageIndex": 0, "totalPages": -1, "pageSize": 10 };
                    _vm._data.page = Object.assign(_vm._data.page, _page);
                    queryEmployeesList();
                    $searchResult.hide();
                    $searchForm.attr('aria-expanded', 'false');
                }
            })
            ;
        $searchClear.on('click', function () {
            hideSearchResult();
            $searchInput.focus();
            $("#content").empty();
            let _page = { "searchInfo": $('#searchInput').val(), "pageIndex": 0, "totalPages": -1, "pageSize": 10 };
            _vm._data.page = Object.assign(_vm._data.page, _page);
            queryEmployeesList();
        });
        $searchCancel.on('click', function () {
            cancelSearch();
            $searchInput.blur();
        });
    }

})(window, document, jQuery);
